<template>
  <view class="bodyView">
    <view class="margin" :class="item.id==member.id?'bg-select':'bg-default'" v-for="item in categoryss"
          @tap="selectData(item)">
      <view class="flex">
        <view class="flex-sub padding">
          {{item.cardName}}
        </view>
        <view class="flex-sub padding text-right">
          ￥{{item.cardPrice}}
        </view>
      </view>
      <view class="padding-left padding-bottom">有效期{{item.dateNum}}天</view>
    </view>
    <view class="margin-top text-gray margin-left margin-right">
       提交申请后，会有客服人员协助您完成接下来的操作。
    </view>
<!--    <view class="bottom">-->
<!--      <view class="btn flex margin">-->
<!--        <view class="flex-sub text-blue font_28">￥{{member.cardPrice||0}}</view>-->
<!--        <view class="flex-twice text-center padding-right" @click="saveProxy"><button class="cu-btn block bg-green s-btn">提交</button></view>-->
<!--      </view>-->
<!--    </view>-->



    <view class="bottom flex">
      <!--      <button class="action text-gray text-shadow">-->
      <!--        <view class='cuIcon-community text-gray'>-->
      <!--        </view>-->
      <!--      </button>-->
      <view class="action text-gray text-shadow padding-left-sm">
        <text class="text-sm">￥{{member.cardPrice||0}}</text>
      </view>
      <view class="flex-twice text-center submit margin-left-xl text-xl text-custom-bg text-white" @tap.stop="preSave">
        <text class="text-white">支付</text>
      </view>
    </view>
<!--    <form>-->

<!--      <view class="cu-form-group r-border">-->
<!--        <view class="title" >-->
<!--          代理等级<text class='cuIcon-info text-custom'></text>-->
<!--        </view>-->
<!--        <picker @change="pickerChange" :value="index" :range="categorysName">-->
<!--          <view class="picker">-->
<!--            {{index>-1?categorysName[index]:'请选择'}}-->
<!--          </view>-->
<!--        </picker>-->
<!--      </view>-->

<!--      <view class="cu-form-group r-border">-->
<!--        <view class="title">所需费用</view>-->
<!--        <input type="text" maxlength="10" placeholder-style="color:#999;font-size:14px;" placeholder="请填写称呼"-->
<!--               v-model="member.cardPrice"  />-->
<!--      </view>-->
<!--       <view class="cu-form-group r-border">-->
<!--        <view class="title">有效天数</view>-->
<!--        <input type="text" maxlength="10" placeholder-style="color:#999;font-size:14px;" placeholder="请填写称呼"-->
<!--               v-model="member.dateNum"  />-->
<!--      </view>-->

<!--      <view class="margin-top text-gray margin-left margin-right">-->
<!--         提交申请后，会有客服人员协助您完成接下来的操作。-->
<!--      </view>-->
<!--      <button class="cu-btn block margin-tb-sm lg s-btn" @click="saveProxy">提交</button>-->
<!--    </form>-->

    <view class="cu-modal" :class="modalName=='Modal'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">支付确认</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl">
          你确定申请该权益吗？
        </view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn line-green text-green" style="color: #e8b835" @tap="hideModal">取消</button>
            <button class="cu-btn bg-green margin-left" style="background-color: #e8b835" @tap="submitProxy">确定</button>

          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive, computed} from "vue";
import { findMechanismCategoryQtCurrentLevel} from "@/common/api/shopCard";
import { shopAllCards, applyShopCard} from "@/common/api/shopCard";
import {useStore} from "../../common/store";
import { onLoad ,onShow} from '@dcloudio/uni-app';

import {redirectToPage, navigateToPage, switchTabPage} from '@/common/utils/redirectPage'

const store = useStore();
const token = computed(() => store.token)
const userId = computed(() => store.userId)

// 非ts写法

const openid = ref('')

const selectId = ref(0)

const categorysIds = ref([]);
const categorysName = ref([]);
const categoryss = ref([]);
const index = ref(0);

const modalName = ref('')

// 用户信息
const member = reactive({
  id: '',
  dateNum: '',
  cardPrice: '',
  adminId: ''
});

const selectData = (item) => {
  if (member.id == item.id) {
    member.id = ''
    member.dateNum = ''
    member.cardPrice = ''
  } else {
    member.id = item.id
    member.dateNum = item.dateNum
    member.cardPrice = item.cardPrice
  }
}

const initShopAllCards = () => {
  categorysIds.value = [];
  categorysName.value = [];
  shopAllCards().then(res => {
    console.log("-------------")
    console.log(res);
    let data = res.data;
    data.forEach(r => {
      categorysIds.value.push(r.id)
      categorysName.value.push(r.cardName)
      categoryss.value.push(r);
    })

    let cate = categoryss.value[0];
    member.cardPrice = cate.cardPrice;
    member.dateNum = cate.dateNum;
    member.id = cate.id;
  })
}

const pickerChange = (e) => {
  index.value = e.detail.value
  let cate = categoryss.value[index.value];
  member.id = cate.id;
  member.cardPrice = cate.cardPrice;
  member.dateNum = cate.dateNum;
}

const preSave = () => {
  modalName.value = 'Modal';
}

const hideModal =(e) => {
  modalName.value = null
}

const submitProxy = () => {
  saveProxy();
  modalName.value = null
}

const saveProxy = async () => {
  if(!member.id) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `请选择卡`,
    });
    return
  }
  member.adminId = userId.value;
  await applyShopCard(member).then(res => {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `${res.message}`,
    });
    setTimeout(() => {
      switchTabPage('/pages/user/index')
    }, 3000)
  })
}

const nameBlur = (e) => {
  member.name = e.detail.value
}

const cityBlur = (e) => {
  member.area = e.detail.value
}

const usernameBlur = (e) => {
  member.username = e.detail.value
  if (!member.username) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `请填写用户名`
    });
    member.username = ''
    return
  }
  var reg = /^[A-Za-z0-9]+$/;
  if (!reg.test(member.username)) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `用户名为数字字或符串`
    });
    member.username = ''
    return;
  }
}

const phoneBlur = () => {
  if (!member.phone) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `请填写手机号码`
    });
    return
  }

  var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  if (!reg.test(member.phone)) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `手机号码有误，请重新输入!`
    });
    member.phone= ''
    return;
  }
}

const redirectHqzInfo = () => {
  uni.navigateTo({
    url: `/pages/user/applyhzqInfo`
  })
}


// register
onLoad((options : any) => {

})

onMounted(async () => {
  initShopAllCards();
})
</script>

<style lang="scss" scoped>



.bodyView {
  .bg-default{
    border-radius: 20rpx;
    background: #e8e8e3;
  }

  .bg-select{
    border-radius: 20rpx;
    background: #e8b835;
    color: white;
  }

.bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 100rpx;
  align-items: center;
  line-height: 100rpx;
  .btn {
    align-items: center;
  }
}

}

</style>
